<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
    <span class="updatable-value" ng-show="!value || value.length === 0" style="vertical-align:top; white-space: pre-wrap"><span class="text-warning"><em>Not Specified</em></span></span>

    <span class="tags-list flexwrap">
        <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span>
        <!-- -->
        <small ng-show="active" style="line-height:18px;" class="mb-xxxs mr-xxxs">
            <a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
                <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
            </a>
        </small>
    </span>

</span>

<span ng-show="updatable.updating">
    <div class="form-group">
        <tags-input class="ti-input-sm" min-length="2" ng-model="value" placeholder="Add labels" replace-spaces-with-dashes="false">
            <auto-complete ng-if="source" min-length="1" debounceDelay="400" source="source($query)"></auto-complete>
        </tags-input>
    </div>
    <div class="form-group">
        <span class="btn" ng-click='update()' tooltip-placement="top" tooltip-popup-delay='500' uib-tooltip="save">
            <i class="text-success glyphicon glyphicon-ok"></i>
        </span>
        <span class="btn" ng-click='cancel()' tooltip-placement="top" tooltip-popup-delay='500' uib-tooltip="cancel">
            <i class="text-danger glyphicon glyphicon-remove"></i>
        </span>
    </div>
</span>
